<template>
  <div class="fireStaff">
    <el-dialog title="解雇员工信息" :visible="visible" @close="closeDig">
      <el-form ref="form" :model="teacherInfo" label-width="80px">
        <div style="width:40%">
          <div class="group_name">员工信息：</div>
          <el-form-item label="教师姓名">
            <el-input v-model="teacherInfo.teacher_name" :disabled="true" />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="teacherInfo.username" :disabled="true" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="teacherInfo.phone" :disabled="true" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="teacherInfo.eamil" :disabled="true" />
          </el-form-item>
        </div>
      </el-form>
      <div>
        <div class="group_name">任教科目：</div>
        <div>
          <div class="group_name1">线下课程：</div>
          <el-table :data="gridData" class="table1" border height="193">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="课程名称">
              <template slot-scope="scope">
                {{ scope.row.className }}
              </template>
            </el-table-column>
            <el-table-column label="开课时间" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.classStartTime }}
              </template>
            </el-table-column>
            <el-table-column label="结束时间" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.classEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="课程进展" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.classProgress }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top:30px">
          <div class="group_name1">线上课程：</div>
          <el-table :data="gridData1" class="table2" border height="193">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column label="课程名称">
              <template slot-scope="scope">
                {{ scope.row.className }}
              </template>
            </el-table-column>
            <el-table-column label="开课时间" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.classStartTime }}
              </template>
            </el-table-column>
            <el-table-column label="结束时间" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.classEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="课程进展" width="200" align="center">
              <template slot-scope="scope">
                {{ scope.row.classProgress }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="ps">备注：解聘后教师数据移入员工列表，确认解聘教师后，教师登录账号失败，教师任教课程将自动下架，原有教学数据保留！</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="firedStaff">确认解聘</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { firedTeacher } from '@/api/teacher'
export default {
    components: {
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        teacherInfo: {
            type: Object
        }
    },
    data() {
        return {
            gridData: [
                {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                }, {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                },
                {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                },
                {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                }
            ],
            gridData1: [
                {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                }, {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                },
                {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                },
                {
                    className: '',
                    classStartTime: '',
                    classEndTime: '',
                    classProgress: ''
                }
            ]
        }
    },
    computed: {},
    watch: {},
    beforeCreate() {
    // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
    // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
    // 初始化渲染页面
    },
    beforeMount() {
    // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
    // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        console.log('teacherInfo', this.teacherInfo)
    },
    methods: {
        closeDig() {
            this.$emit('closeFireStaff')
        },
        firedStaff() {
            this.$confirm('确定要解聘该员工', '解聘', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                firedTeacher(this.teacherInfo).then(res => {
                    console.log('解聘员工', res)
                    if (res.code === 200) {
                        this.$notify({
                            title: '成功',
                            message: '解聘老师成功',
                            type: 'success'
                        })
                        this.$emit('closeFireStaff')
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消解聘'
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.group_name{
    margin: 15px 0px;
}
.group_name1{
    margin: 8px 15px 15px 10px
}
.table1{
   margin-left: 40px;
   width: 90%;
}
.table2{
   margin-left: 40px;
   width: 90%;
}
.ps{
    margin: 20px 15px;
}
</style>
